﻿/// <reference path="C:\File\学习\Web前端\Angluar\learnangular\Angular\Content/js/angular1.4.8.js" />
angular.module('components', [])
.directive('tabs', function () {
    return {
        restricate: 'E',
        transclude: true,
        scope: {},
        controller: function ($scope, $element) {
            var panes = $scope.panes = [];
            $scope.select = function (pane) {
                angular.forEach(panes, function (pane) {
                    pane.selected = false;
                })
                pane.select = true;
            }
            this.addPane = function (pane) {
                if (panes.length == 0) $scope.select(pane);
                panes.push(pane);
            }
        },
        template:
            '<div class="tabbable">' +
                '<ul class="nav nav-tabs">' +
                    '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
                        '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
                    '</li>' +
                '</ul>' +
                '<div class="tab-content" ng-transclude></div>' +
            '</div>',
        replace: true
    }
}).directive('pane', function () {
    return {
        require: '^tabs',
        restric: 'E',
        transclude: true,
        scope: { title: '@' },
        link: function (scope, element, attrs, tabsController) {
            tabsController.addPane(scope);
        }, template:
             '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
            '</div>',
        replace: true
    }
})